<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>
    <link rel="shortcut icon" href="static/favicon.svg" type="image/x-icon">
    <link rel="stylesheet" href="static/icomoon/style.css">
    <link rel="stylesheet" href="static/zui/zui.css">
    <link rel="stylesheet" href="static/app.css">
    <script src="static/zui/zui.js"></script>
    <script src="static/jquery-3.7.1.min.js"></script>
</head>
<body>

<!-- 顶部菜单 -->
<header class="pywebview-drag-region header flex justify-between">
    <div class="header-brand flex justify-center items-center">
        <img src="static/favicon.svg">
    </div>
    <div class="header-options flex row-reverse">
        <div class="header-buttons flex row-reverse">
            <div class="header-button header-button-close flex justify-center items-center" data-toggle="modal"
                 data-target="#confirmCloseDialog">
                <i class="icomoon-close"></i>
            </div>
            <div class="header-button header-button-minimize flex justify-center items-center"
                 onclick="minimizeWindow();">
                <i class="icomoon-minimize"></i>
            </div>
        </div>
        <div class="header-capsule user-nologin-capsule flex items-center">
            <div class="header-capsule-wrapper flex items-center">
                <div class="header-avatar flex items-center"><img src="static/avatar/avatar.png"></div>
                <div class="header-user-info flex items-center text-sm">
                    <div class="header-user-name">未登录</div>
                </div>
            </div>
        </div>
        <div class="login-dialog-shown" data-toggle="modal" data-target="#loginDialog" hidden></div>
        <div class="register-dialog-shown" data-toggle="modal" data-target="#registerDialog" hidden></div>
        <div class="reset-dialog-shown" data-toggle="modal" data-target="#resetDialog" hidden></div>
    </div>
</header>
<!-- 主体内容 -->
<div class="main-area flex row justify-start">
    <!-- 侧边栏 -->
    <div class="sidebar flex col justify-between items-center">
        <div class="sidebar-menu flex col">
            <div class="sidebar-menu-item toggle flex row justify-center items-center active to-home">
                <i class="icomoon-home"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-list"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-search"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-heart"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-vip"></i>
            </div>
        </div>
        <div class="sidebar-menu flex col">
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-user"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center">
                <i class="icomoon-setting"></i>
            </div>
            <div class="sidebar-menu-item toggle flex row justify-center items-center to-tickets">
                <i class="icomoon-chat"></i>
            </div>
            <div class="sidebar-menu-item flex row justify-center items-center" data-toggle="modal"
                 data-target="#appInfoDialog">
                <i class="icomoon-warning"></i>
            </div>
        </div>
    </div>
    <div class="content flex col">
        <iframe id="main-iframe" src="index.html"></iframe>
    </div>
</div>

<!-- 确认关闭对话框 -->
<div class="modal" id="confirmCloseDialog">
    <div class="modal-dialog shadow">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">提示</div>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body">
                <p>确定关闭？</p>
            </div>
            <div class="modal-footer justify-end">
                <button type="button" class="btn danger" id="close-confirm-close-button">关闭</button>
                <button type="button" class="btn" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 软件信息展示 -->
<div class="modal" id="appInfoDialog">
    <div class="modal-dialog shadow size-sm bd-none">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col">
                <div class="dialog-info-brand flex row items-center">
                    <img src="static/favicon.svg">
                    <div class="flex col text font-sans justify-start items-start">
                        <div class="text-lg">ACGBH Version 1.0.0</div>
                        <div class="flex row flex-wrap text-sm">
                            <div class="text"><a href="javascript:;" class="to-terms">服务条款</a></div>
                            <div class="text"><a href="javascript:;" class="to-privacy">隐私政策</a></div>
                        </div>
                    </div>
                </div>
                <div class="dialog-info-link">
                    <div>游戏黑域：<a href="https://acgbh.com" target="_blank">https://acgbh.com</a></div>
                </div>
                <div class="dialog-info-support flex row flex-wrap">
                    <div class="dialog-info-support-item w-28 h-8">python v3.10</div>
                    <div class="dialog-info-support-item w-28 h-8">pywebview v5.3.2</div>
                    <div class="dialog-info-support-item w-28 h-8">zui v3.4.4</div>
                </div>
                <div class="dialog-info-footer flex row justify-between items-center">
                    <div class="dialog-info-copyright">@2024 acgbh</div>
                    <div class="dialog-info-update">检查更新</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 登录 -->
<div class="modal common-dialog w-320" id="loginDialog">
    <div class="modal-dialog shadow size-sm bd-none w-320">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title flex row justify-center">登录</div>
            </div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col">
                <div class="form">
                    <input type="email" class="form-control" placeholder="邮箱"/>
                    <input type="password" class="form-control" placeholder="密码"/>
                    <div class="captcha-area flex justify-between">
                        <input type="text" class="form-control captcha-input" placeholder="验证码">
                        <img src="" alt="验证码" class="captcha-image">
                    </div>
                    <div class="link flex row justify-between">
                        <a href="javascript:;" class="to-register">没有账号，去注册</a>
                        <a href="javascript:;" class="to-reset">忘记密码</a>
                    </div>
                </div>
                <div class="button">
                    <button type="button" class="btn primary">登录</button>
                </div>
            </div>
        </div>
        <div class="footer flex row justify-center">
            登录注册即表示同意&nbsp;<a href="javascript:;" class="to-terms">服务条款</a>&nbsp;和&nbsp;<a href="javascript:;" class="to-privacy">隐私政策</a>
        </div>
    </div>
</div>

<!-- 注册 -->
<div class="modal common-dialog w-320" id="registerDialog">
    <div class="modal-dialog shadow size-sm bd-none">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title flex row justify-center">注册</div>
            </div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col">
                <div class="form">
                    <input type="email" class="form-control" placeholder="邮箱"/>
                    <input type="password" class="form-control" placeholder="密码"/>
                    <input type="password" class="form-control" placeholder="再次输入密码"/>
                    <div class="captcha-area flex justify-between">
                        <input type="text" class="form-control captcha-input" placeholder="验证码">
                        <img src="" alt="验证码" class="captcha-image">
                    </div>
                    <div class="link flex row justify-start">
                        <a href="javascript:;" class="to-login">已有账号，去登录</a>
                    </div>
                </div>
                <div class="button">
                    <button type="button" class="btn primary">注册</button>
                </div>
            </div>
        </div>
        <div class="footer flex row justify-center">
            登录注册即表示同意&nbsp;<a href="javascript:;" class="to-terms">服务条款</a>&nbsp;和&nbsp;<a href="javascript:;" class="to-privacy">隐私政策</a>
        </div>
    </div>
</div>

<!-- 找回密码 -->
<div class="modal common-dialog w-320" id="resetDialog">
    <div class="modal-dialog shadow size-sm bd-none">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title flex row justify-center">重置密码</div>
            </div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col">
                <div class="form">
                    <input type="email" class="form-control" placeholder="邮箱"/>
                    <div class="captcha-area flex justify-between">
                        <input type="text" class="form-control captcha-input" placeholder="验证码">
                        <img src="" alt="验证码" class="captcha-image">
                    </div>
                    <div class="link flex row justify-start">
                        <a href="javascript:;" class="to-login">返回登录</a>
                    </div>
                </div>
                <div class="button">
                    <button type="button" class="btn primary">重置密码</button>
                </div>
            </div>
        </div>
        <div class="footer flex row justify-center">
            登录注册即表示同意&nbsp;<a href="javascript:;" class="to-terms">服务条款</a>&nbsp;和&nbsp;<a href="javascript:;" class="to-privacy">隐私政策</a>
        </div>
    </div>
</div>

<script src="static/app.js"></script>
</body>
</html>